<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Dojo Charting Engine, general tests</title>
        <script>
            djConfig={
                isDebug:true
            }</script>
        <script src="dojo-charting.js"></script>
        <script>
            dojo.require("dojo.collections.Store");
            dojo.require("dojo.charting.Chart");
            dojo.require('dojo.json');
function circle_click(arg1) {
    alert(arg1);
}
    dojo.addOnLoad(function(){
        var mzjz = [
            {mz:367, jz:20,h:8},
            {mz:844, jz:30,h:9},
            {mz:1258,jz:60,h:10},
            {mz:1178,jz:10,h:11},
            {mz:207, jz:20,h:12},
            {mz:8,   jz:30,h:13},
            {mz:427, jz:10,h:14},
            {mz:831, jz:20,h:15},
            {mz:451, jz:50,h:16},
            {mz:58,  jz:30,h:17},
            {mz:1,   jz:20,h:19}
        ];
        var store = new dojo.collections.Store();
        store.setData(mzjz);
        var mz = new dojo.charting.Series({
            dataSource:store,
            bindings:{ x:'h', y:'mz'},
            label:"门诊"
        });
        var jz = new dojo.charting.Series({
            dataSource:store,
            bindings:{ x:'h', y:'jz'},
            label:"急诊"
        });

        var data = mz.evaluate();
        var a=[];
        for(var i=0; i<data.length; i++){
            a.push("{ x:"+data[i].x +", y:"+data[i].y + "}");
        }
        dojo.debug("Data evaluation:\n"+a.join("\n"));

        //  keep going.
        var xA = new dojo.charting.Axis();
        xA.range={upper:24, lower:-10};
        xA.origin="max";
        xA.showLines = true;
        xA.showTicks = true;

        xA.label = "时间";
        xA.labels = [8,9,10,11,12,13,14,15,16,17,18,19];
        xA.showLabel = true;

        var yA = new dojo.charting.Axis();
        yA.range={upper:1500,lower:0};
        yA.showLines = true;
        yA.showTicks = true;
        yA.labels = [ {label:"min", value:0 }, { label:"35",value:35 }, { label:"max", value:1258 } ];
        yA.label = "就诊数"

        var p2 = new dojo.charting.Plot(xA, yA);
        p2.addSeries({ data:mz, plotter: dojo.charting.Plotters.Line });

        var p = new dojo.charting.Plot(xA, yA);
        p.renderType = dojo.charting.RenderPlotSeries.Grouped;
        p.addSeries({ data:jz, plotter: dojo.charting.Plotters.Bar });
        p.addSeries({ data:mz, plotter: dojo.charting.Plotters.Bar });

        var pa = new dojo.charting.PlotArea();
        pa.size={width:700,height:400};

        // 坐标轴 区域padding
        pa.padding={top:20, right:20, bottom:50, left:80 };
        pa.plots.push(p2);
        pa.plots.push(p);

        //pa.plots.push(pA);
        mz.color = pa.nextColor();
        jz.color = pa.nextColor();


        var chart = new dojo.charting.Chart(null, "Test chart", "This is a potential description");
        // x,y plotArea's padding
        chart.addPlotArea({ x:50,y:50, plotArea:pa });
        //chart.addPlotArea({ x:50,y:250, plotArea:pa2 });

        chart.node = dojo.byId("chartTest1");
        chart.render();
    });
        </script>
        <style>
            #chartTest1 {
                margin:12px;
                width:800px;
                height:500px;
                background-color:#dedeed;
                border:1px solid #999;
            }
        </style>
    </head>
    <body>
        <div id="chartTest1"></div>
    </body>
</html>
